<script setup lang="ts">

</script>

<template>
<div class="input-wrapper">
  <div class="input" :contenteditable="true">
  </div>
</div>
</template>

<style scoped lang="scss">
.input-wrapper{
  //background-color: pink;
  padding: 6px 0 ;
  flex: 1;
  display: flex;
  align-content: center;

  .input {
    width: 100%;
    border-radius: 10px;
    font-size: 16px;
    color: white;
    padding: 0 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center; /* 垂直居中 */
    //word-wrap: break-word;    /* 允许长单词换行 */
    word-break: break-word;   /* 在适当位置换行 */

    white-space: normal;      /* 允许正常换行 */
    overflow-wrap: break-word; /* 现代浏览器的换行属性 */


    &:focus-within {
      outline: 1px solid var(--hover-primary);

    }
  }
}
</style>
